<template>
    <h1>操作人员添加</h1>
    <el-form :model="admin" label-width="120px">
        <el-form-item label="**姓名">
            <el-input v-model="admin.adminname" />
        </el-form-item>
        <el-form-item label="**密码">
            <el-input type="password" v-model="admin.password" />
        </el-form-item>
        <el-form-item label="角色">
            <el-radio-group v-model="admin.role">
                <el-radio :label="1">超级管理员</el-radio>
                <el-radio :label="2">普通管理员</el-radio>
            </el-radio-group>
        </el-form-item>
        <p>
            <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" highlight-current />
        </p>
        <el-form-item>
            <el-button type="primary" @click="addAdmin">添加</el-button>
        </el-form-item>
        
    </el-form>

</template>
    
<script setup lang="ts">

import { ElMessage,ElTable,ElTree } from 'element-plus';
import { reactive,ref } from 'vue';
import service from '../../../utils/service';
// 在setup函数里（setup语法糖里），如果想使用路由对象。
import {useRouter} from "vue-router";
import {menudata as data} from "../../../grants/menudata"
import type {TreeKey} from "element-plus/es/components/tree/src/tree.type"

const $router = useRouter();

interface IAdmin {
    "adminname": string,
    "password": string,
    "role": number,//1:表示超级管理员，2：普通管理员
    "checkedKeys": TreeKey[]
}

// 当前管理员的数据
const admin = reactive<IAdmin>({
    "adminname": "",
    "password": "",
    "role": 1,
    "checkedKeys":[]
})

let  treeRef = ref<InstanceType<typeof ElTree>>();

//添加功能 
const addAdmin=()=>{
    

    let arr:TreeKey[] = treeRef.value!.getCheckedKeys();//获取的是选中状态的菜单项。

    let halfArr:TreeKey[] = treeRef.value!.getHalfCheckedKeys();//获取半选中状态的菜单项。

    arr = arr.concat(halfArr);

    admin.checkedKeys = arr ;    

    service({
        url:"/admin/add",
        method:"post",
        data:admin
    }).then(res=>{
        if(res.data.code==="200"){
            ElMessage({
                message:"添加成功！",
                type:"success"
            })
            $router.push("/Admin/renList");
        }
    })
}

</script>
    
<style></style>